<template>
  <div class="nav">
    <div class="logo title-bg"><em>禾美环保管理平台</em></div>
    <div class="nav-list">
      <div
        @click="selectModule(item)"
        :class="['item', selectMoudles == item.component ? 'active' : '']"
        v-for="item in navList"
        :key="item.id"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="right">
      <!-- 回到系统页面 -->
      <div class="btn back" @click="goSelectUrl"></div>
    </div>
  </div>
</template>
<script>
  import {mapActions, mapState} from 'vuex'
  import {url} from '@views/gis/jumpUrl'

  export default {
  data() {
    return {
      navList: [
        {
          id: 1,
          name: '环保管家',
          component: 'environmental',
        },
      ],
    }
  },
  computed: {
    ...mapState(['selectMoudles', 'moudles']),
  },
  methods: {
    ...mapActions(['setNavModule', 'getProcess', 'getTreeList']),
    //选择模块
    selectModule(item) {
      this.setNavModule(item.component)
      if (this.moudles[item.component]) return
      //工艺参数
      this.getTreeList({
        name: item.component,
      })
    },
    //返回到特定的页面
    goSelectUrl() {
       url.index()
    },
  },
  mounted(){
    this.getTreeList({
        name: 'environmental',
      })
  }
}
</script>
<style lang="less" scoped>
.nav {
  width: 100%;
  height: 46px;
  background-color: #19376d;
  box-shadow: 2px 2px 10px -2px #63daff;
  display: flex;
  align-items: center;
  .logo {
    width: 437px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 7px;
    em {
      font-size: 32px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #000000;
      line-height: 45px;
      background: linear-gradient(180deg, #ffffff 0%, #1990fd 99%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
  .nav-list {
    display: flex;
    align-items: center;
    margin-left: 24px;
    .item {
      color: #fff;
      padding: 0 12px;
      cursor: pointer;
    }
    .active {
      text-shadow: 1px 1px 3px #163fff, 0px 1px 3px rgba(3, 255, 223, 0.92);
      color: #02e0f7;
    }
  }
  .right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    margin-right: 24px;
    align-items: center;
    .btn {
      width: 32px;
      height: 32px;
      margin-right: 11px;
      position: relative;
      border-radius: 50%;
      cursor: pointer;
      margin-top: 3px;
    }
  }
}
</style>